<template>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>问题管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 查询表单 -->
	<div class="serchForm">
		<el-form :inline="true" :model="questionQueryForm" class="demo-form-inline">
			<el-form-item label="问题标题">
				<el-input v-model="questionQueryForm.title" placeholder="请输入搜索问题" clearable @clear="query" />
			</el-form-item>

			<el-form-item label="提问昵称" style="margin-left: -20px">
				<el-input v-model="username" placeholder="请输入提问昵称" clearable @clear="query" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="query">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch">批量删除</el-button>
			</el-form-item>
		</el-form>
	</div>

	<!-- 表格 -->
	<div>
		<!-- 表格组件 -->
		<el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="150" />
			<el-table-column prop="title" label="问题标题" />
			<el-table-column prop="content" label="问题内容" />
			<el-table-column prop="sysUser.username" label="提问用户昵称" />
			<el-table-column prop="time" label="提问时间" />

			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button type="primary" size="small" @click="check(scope.row)"> 查看 </el-button>
					<el-button type="success" size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->

		<el-pagination v-model:current-page="questionQueryForm.pageNum" v-model:page-size="questionQueryForm.pageSize"
			:page-sizes="[5, 10, 15, 20]" :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>

	<!-- 查看弹框 -->
	<div class="checkDialog">
		<el-dialog v-model="dialogFormVisible" title="问题详情" width="700px">
			<el-form :model="checkForm" label-width="auto">
				<el-form-item label="问题标题">
					<el-input v-model="checkForm.title" autocomplete="off" />
				</el-form-item>
				<el-form-item label="问题内容">
					<el-input v-model="checkForm.content" :rows="10" class="textarea" type="textarea"
						autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue'
	const axios = getCurrentInstance().appContext.config.globalProperties.axios
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'

	//定义表格需要的数据
	const tableData = ref([])
	//页码外观大小
	const size = ref('default')

	//总的记录数
	const total = ref(0)
	//弹框是否显示
	const dialogFormVisible = ref(false)

	//定义复选框选中的数据
	const ids = ref([])
	//搜索框对应的表单
	const username = ref('')
	const questionQueryForm = ref({
		questionTitle: '',
		pageNum: 1,
		pageSize: 5,
	})

	//查看弹框表单
	const checkForm = ref({
		title: '',
		content: '',
	})

	//查询方法
	const query = () => {
	  axios
	    .get('question/pages', {
	      params: {
	        pageNum: questionQueryForm.value.pageNum,
	        pageSize: questionQueryForm.value.pageSize,
	        title: questionQueryForm.value.title,
	        username: username.value  // 改成 username  // 嵌套对象的属性
	      }
	    })
	    .then((res) => {
	      tableData.value = res.data.list
	      total.value = res.data.total
	    })
	}
	// const query = () => {
	// 	axios
	// 		.get(`question/pages?sysUser1.username=${username.value}`, {
	// 			params: questionQueryForm.value,
	// 		})
	// 		.then((res) => {
	// 			console.log(res)
	// 			tableData.value = res.data.list
	// 			total.value = res.data.total
	// 		})
	// }
	//改变当前页码
	const handleCurrentChange = (res) => {
		console.log(questionQueryForm.value)
		query()
	}
	//改变当前页面数据展示大小
	const handleSizeChange = (res) => {
		console.log(res)
		query()
	}

	//查看数据
	const check = (row) => {
		// axios.get(`/problem/${id}`)
		// 	.then((resp) => {
		// 		dialogFormVisible.value = true;
		// 		checkForm.value.problemTitle = resp.data.problemTitle;
		// 		checkForm.value.problemContent = resp.data.problemContent;
		// 	})
		// console.log(id);
		dialogFormVisible.value = true
		checkForm.value = row
	}

	//删除操作
	const deleteInfo = (id) => {
		ElMessageBox.confirm('确定要删除这条信息吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				axios
					.delete(`/question/${id}`)
					.then((res) => {
						if (res.code == 200) {
							ElMessage({
								type: 'success',
								message: '删除成功',
							})
						}
					})
					.finally(() => {
						query()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	//批量删除
	const deleteBatch = () => {
		ElMessageBox.confirm('确定要删除这些数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				axios
					.delete(`/question?ids=${ids.value.join()}`)
					.then((res) => {
						if (res.code == 200) {
							ElMessage({
								type: 'success',
								message: '删除成功',
							})
						}
					})
					.finally(() => {
						query()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}

	//复选框选中的操作
	const handleSelectionChange = (val) => {
		ids.value = val.map((item) => {
			return item.id
		})
		console.log(ids.value)
	}
	//页面挂载
	onMounted(() => {
		query()
	})
</script>

<style scoped>
	.serchForm {
		margin-top: 10px;
	}

	.serchForm .el-button {
		margin-left: -20px;
	}
</style>